<template>
  <div class="msg">
      <x-header :left-options="{backText: ''}" title='消息' class="whiteHeader"></x-header>
      <!--<div class="blank"></div>-->
      <div class="msgInfo">
          <div class="news">
              <div class="newsImg">
                  <img src="../../assets/image/msgCenter/news.png" alt="" />
              </div>
              <div class="newsText" @click="newsList">
                  <div class="newsTitle">消息通知</div>
                  <div class="newsInfo">无最新消息</div>
              </div>
          </div>
          <div class="flow">
              <div class="flowImg">
                  <img src="../../assets/image/msgCenter/flow.png" alt="" />
              </div>
              <div class="flowText" @click="flowList">
                  <div class="flowTitle">物流消息</div>
                  <div class="flowInfo">无最新物流消息</div>
              </div>
          </div>
          <div class="activity">
              <div class="actImg">
                  <img src="../../assets/image/msgCenter/activity.png" alt="" />
              </div>
              <div class="actText" @click="actList">
                  <div class="actTitle">车网通活动</div>
                  <div class="actInfo" v-if="msgData.length!=0&&isHave">{{msgData[0].SUBJECT}}</div>
                  <div class="actInfo" v-else>暂无最新活动</div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import {XHeader} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"msgCenter",
  // 数据
  data(){

    return{
    	userId:'',//用户id
    	phone:'',//手机号码
    	city:'',//城市
    	msgData:'',//所有消息数据
    	stampNow:'',//当前时间戳
    	isHave:false,//是否有活动
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.phone=getCookie('phone');
    this.city = sessionStorage.getItem('city');//城市
    let oCity = '';
    oCity = this.city == ''?'深圳':this.city;
    this.stampNow =  Date.parse( new Date());    
    //车网通活动
    this.$fetchPost('/ActWeb/getEffectiveAct',{phone:this.phone,CITY:oCity,PAGE_NO:1,PAGE_SIZE:10,POSITION:2}).then(res=>{
            if(res.STATUS_CODE == 1){            	                
                this.msgData = res.RESULT_DATA;     
                if(res.RESULT_DATA[0].START_DATE<this.stampNow&&res.RESULT_DATA[0].END_DATE>this.stampNow){
                	this.isHave = true;//检测活动是否过期
                }
            }          
            //console.dir(this.actData);
    },err=>console.log(err));
    
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
      //消息列表
      newsList(){
          this.$router.push('/newsList');
      },
      //物流列表
      flowList(){
          this.$router.push('/flowList');
      },
      //活动列表
      actList(){
          this.$router.push('/actList');
      },
  },
  // 子组件
  components:{
      XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>        
.msg{
    background:#fff;       
    .header{
        width:7.5rem;
        height:1rem;            
        position:fixed;            
        top:0;
        display:flex;
        justify-content:space-between;
        align-items:center;
        border-bottom:0.01rem solid #aaaaaa;
        background:#f8f8f8;           
        z-index:999;
        .headerArrow{
            width:0.8rem;
            height:0.44rem;            
            display:flex;
            flex-flow:column;               
            img{
                width:0.44rem;
                height:0.44rem;
                margin:0 auto;                              
            }            
        }
        .msgText{
            width:6.7rem;
            height:0.44rem;            
            p{
                font-size:0.26rem;
                text-indent:-0.8rem;
                color:#7e7e7e;
            }
        }
    }
    .blank{
        width:100%;
        height:1rem;
        background:#ffffff;
    }
    .msgInfo{
        
        .news{
            width:7.5rem;
            height:1.2rem;            
            display:flex;
            border-bottom:0.01rem solid #f0f0f4; 
            .newsImg{
                width:1.5rem;
                height:1.2rem;
                display:flex;
                flex-flow:column;
                justify-content:center;                
                img{
                    width:0.9rem;
                    height:0.9rem;
                    align-self:center;
                }
            }
            .newsText{
                width:6rem;
                height:1.2rem;
                display:flex;
                flex-flow:column;
                justify-content:space-around;                
                .newsTitle{
                    font-size:0.28rem;
                    color:#000;
                    font-weight:bold;
                    text-align:left;
                }
                .newsInfo{
                    font-size:0.26rem;
                    color:#aaa;
                    text-align:left;
                    margin-top:-0.3rem;
                }
            }
        }
        .flow{
            width:7.5rem;
            height:1.2rem;            
            display:flex;
            border-bottom:0.01rem solid #f0f0f4;
            .flowImg{
                width:1.5rem;
                height:1.2rem;
                display:flex;
                flex-flow:column;
                justify-content:center;                
                img{
                    width:0.9rem;
                    height:0.9rem;
                    align-self:center;
                }
            }
            .flowText{
                width:6rem;
                height:1.2rem;
                display:flex;
                flex-flow:column;
                justify-content:space-around;                
                .flowTitle{
                    font-size:0.28rem;
                    color:#000;
                    font-weight:bold;
                    text-align:left;
                }
                .flowInfo{
                    font-size:0.26rem;
                    color:#aaa;
                    text-align:left;
                    margin-top:-0.3rem;
                }
            }
        }
        .activity{
            width:7.5rem;
            height:1.2rem;            
            display:flex;
            border-bottom:0.01rem solid #f0f0f4;
            .actImg{
                width:1.5rem;
                height:1.2rem;
                display:flex;
                flex-flow:column;
                justify-content:center;                
                img{
                    width:0.9rem;
                    height:0.9rem;
                    align-self:center;
                }
            }
            .actText{
                width:6rem;
                height:1.2rem;
                display:flex;
                flex-flow:column;
                justify-content:space-around;                
                .actTitle{
                    font-size:0.28rem;
                    color:#000;
                    font-weight:bold;
                    text-align:left;
                }
                .actInfo{
                    font-size:0.26rem;
                    color:#aaa;
                    text-align:left;
                    margin-top:-0.3rem;
                }
            }
        }
    }
}
</style>
